I hope everyone is well. Today we will discuss how to create stylish sitemap in blogger. Before that we don't know anything about sitemap.
Sitemap:
A sitemap is an overview of all the pages of a website that interactively displays the website's structure and main links. It is important for the overall features of the website for the reader of the website and for the search engine authority.
A sitemap typically contains the following information:
Links to main pages: The first information in the sitemap is the links to the main pages of the website, such as homepage, about us, services, blog, contact, etc.
Links to each page: The sitemap contains links to all individual pages, through which you can go directly to each page.
Basic Description of Pages: Each page is displayed as an abbreviation above, usually containing the page title or brief description.
Categories or Sections of Pages: Pages in a sitemap can be divided into sections or categories, so that readers can search through different topics on the site.
For Optimization: Sitemap is important for search engine authority, as it gives a complete list of all the pages of the website. Sitemaps highlight the main pages of a website to search engine authorities, which helps increase the site's visibility in search engines as those pages are indexed.
How To Stylish Sitemap In Blogger :
Follow the steps below to create a sitemap on the Blogger platform:
Login to Blogger dashboard
Blogger.comGo to the website and yourGoogleLogin to the account in which you created your blog.
Go to your blog dashboard
Then click on Page from blogger dashboard .
Now click on Create a New Page .
Then click on the page's HTML .
Copy and paste the following codes into the HTML page .
Sitemap Code :
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<style type=”text/css”>
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<br />
<div class=”tabbed-toc” id=”tabbed-toc”>
<span class=”loading”>Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: “/”, // Website URL
containerId: “tabbed-toc”, // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC”, // A “no thumbnail” URL
monthNames: [ // Array of month names
“January”,
“February”,
“March”,
“April”,
“May”,
“June”,
“July”,
“August”,
“September”,
“October”,
“November”,
“December”
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || “onload”)
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the “New!” mark in most recent posts, or define how many recent posts are to be marked
newText: ‘ – <em style=”color:red;”>New!</em>’ // HTML for the “New!” text
};
</script>
<script src=”https://cdn.jsdelivr.net/h/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js”></script></div> <!– HTML Sitemap Css By Www.daudbd.Com –>
